<template>
	<view>		
		<!-- 步骤进度条 -->
		<view class="progress-wrapper">
			<view class="line"></view>
			<view class="progress-step" v-for="(step, index) in steps" :key="index">
				<view class="step-circle" :class="{ 'completed': index < currentStep }">
					<text v-if="index < currentStep" class="step-num">{{ index + 1 }}</text>
					<text v-else class="step-num">{{ index + 1 }}</text>
				</view>
				<view class="step-line">{{step}}</view>
			</view>
		</view>
		<view class="authentication-info">
			<view class="item-wrap type">
				<view class="form-title color-title">认证类型</view>
				<view class="type-wrap">
					<view :class="{
				'selected color-base-text color-base-border':
				  infoData.alt_merchant_type == 11,
			  }" @click="infoData.alt_merchant_type = 11">
						<text>个体户</text>
						<text class="iconfont iconduigou1 color-base-text"></text>
					</view>
					<view :class="{
				'selected color-base-text color-base-border':
				  infoData.alt_merchant_type == 12,
			  }" @click="infoData.alt_merchant_type = 12">
						<text>企业</text>
						<text class="iconfont iconduigou1 color-base-text"></text>
					</view>
				</view>
			</view>

			<view class="item-wrap" v-if="
			infoData.alt_merchant_type == 11 || infoData.alt_merchant_type == 12
		  ">
				<view class="form-wrap input-img">
					<text class="label"><text class="required color-base-text">*</text>营业执照电子版</text>
					<view class="img-wrap" @click="uplodImg('trade_licence', 1)">
						<text class="iconfont iconadd1" v-if="!infoData.trade_licence"></text>
						<image v-else :src="$util.img(infoData.trade_licence)" mode="aspectFit">
						</image>
					</view>
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>公司名称</text>
					<input type="text" class="uni-input" placeholder="请输入公司名称" v-model="infoData.alt_mch_name" />
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>公司简称</text>
					<input type="text" class="uni-input" placeholder="请输入公司简称" v-model="infoData.alt_mch_short_name" />
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>统一社会信用码</text>
					<input type="text" class="uni-input" placeholder="请输入统一社会信用码" v-model="infoData.license_no" />
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>营业执照有效期</text>
					<view class="flex_1">
						<view class="time-change">
							<picker mode="date" class="padding-left padding-right" @change="businessStratDateChange" :value="infoData.license_valid_date">
								<view class="uni-input">
									{{infoData.license_valid_date ? infoData.license_valid_date : "起始时间"}}
								</view>
							</picker>
							-
							<picker mode="date" class="padding-left padding-right" @change="businessEndDateChange" :value="infoData.license_expiry">
								<view class="uni-input">
									{{infoData.license_expiry ? infoData.license_expiry : "到期时间"}}
								</view>
							</picker>
						</view>
						<view class="tips font-size-activity-tag color-tip padding-bottom">长期请选择：2099年12月31日</view>
					</view>
				</view>
				<view class="form-wrap more-wrap">
					<text class="label"><text class="required color-base-text">*</text>经营行业</text>
					<pick-bussiness-type v-if="loadingBussiness" class="selected" :defaultType="infoData.alt_merchant_type"
						:bussinessString="infoData.bussinessString" :bussinessIndex="infoData.bussinessIndex"
						:isType="infoData.alt_merchant_type" @getBussiness="handleGetBussiness">
					</pick-bussiness-type>
				</view>
				<!-- <view class="form-wrap more-wrap">
					<text class="label"><text class="required color-base-text">*</text>经营地区</text>
					<input type="text" class="uni-input" placeholder="请输入经营地区" v-model="infoData.manage_addr" />
				</view> -->
				<view class="form-wrap more-wrap">
					<text class="label"><text class="required color-base-text">*</text>经营地区</text>
					<pick-regions-application v-if="loadingBussiness" :regionsString="infoData.companyAddressString"
						:resgionsIndex="infoData.companyAddressIndex" class="selected" @getRegions="handleGetRegions">
					</pick-regions-application>
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>详细地址</text>
					<input type="text" class="uni-input" placeholder="请输入详细地址" v-model="infoData.manage_addr" />
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>经营范围</text>
					<input type="text" class="uni-input" placeholder="请输入经营范围" v-model="infoData.manage_scope" />
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>商户邮箱</text>
					<input type="text" class="uni-input" placeholder="请输入商户邮箱" v-model="infoData.login_name" />
				</view>
				<!-- <view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>联系人电话</text>
					<input type="text" class="uni-input" placeholder="请输入联系人电话" v-model="infoData.busi_contact_mobile_no" />
				</view> -->
				<view class="form-wrap input-img">
					<text class="label">特殊资质1</text>
					<view class="img-wrap" @click="uplodImg('special_licence_one', 1)">
						<text class="iconfont iconadd1" v-if="!infoData.special_licence_one"></text>
						<image v-else :src="$util.img(infoData.special_licence_one)" mode="aspectFit">
						</image>
						<view class="tips font-size-activity-tag color-tip padding-bottom">无特殊资质可忽略</view>
					</view>
				</view>
				<view class="form-wrap input-img">
					<text class="label">特殊资质2</text>
					<view class="img-wrap" @click="uplodImg('special_licence_two', 1)">
						<text class="iconfont iconadd1" v-if="!infoData.special_licence_two"></text>
						<image v-else :src="$util.img(infoData.special_licence_two)" mode="aspectFit">
						</image>
						<view class="tips font-size-activity-tag color-tip padding-bottom">无特殊资质可忽略</view>
					</view>
				</view>
			</view>

			<view class="item-wrap">
				<view class="form-wrap input-img">
					<text class="label"><text class="required color-base-text">*</text>法人身份证人像面</text>
					<view class="img-wrap" @click="uplodImg('legalPersonFront', 1)">
						<text class="iconfont iconadd1" v-if="!infoData.id_doc_copy">{{
				infoData.id_doc_copy
			  }}</text>
						<image v-else :src="$util.img(infoData.id_doc_copy)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="form-wrap input-img">
					<text class="label"><text class="required color-base-text">*</text>法人身份证国徽面</text>
					<view class="img-wrap" @click="uplodImg('legalPersonReverse', 2)">
						<text class="iconfont iconadd1" v-if="!infoData.id_card_national"></text>
						<image v-else :src="$util.img(infoData.id_card_national)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>法人姓名</text>
					<input type="text" class="uni-input" placeholder="请输入姓名" v-model="infoData.legal_person" />
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>法人身份证号</text>
					<input type="text" class="uni-input" maxlength="18" placeholder="请输入身份证号"
						v-model="infoData.id_card_no" />
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>身份证有效期</text>
					<view class="time-change">
						<picker mode="date" class="padding-left padding-right" @change="bindStartDateChange"
							:value="infoData.id_card_valid_time_begin">
							<view class="uni-input">
								{{
					infoData.id_card_valid_time_begin
					  ? infoData.id_card_valid_time_begin
					  : "起始时间"
				  }}
							</view>
						</picker>
						-
						<picker mode="date" class="padding-left padding-right" @change="bindEndDateChange"
							:value="infoData.id_card_valid_time_end">
							<view class="uni-input">
								{{
					infoData.id_card_valid_time_end
					  ? infoData.id_card_valid_time_end
					  : "到期时间"
				  }}
							</view>
						</picker>
					</view>
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>法人手机</text>
					<input type="text" class="uni-input" maxlength="11" placeholder="请输入手机号" v-model="infoData.phone_no" />
				</view>
				<view class="form-wrap more-wrap">
					<text class="label"><text class="required color-base-text">*</text>法人是否为受益人</text>
					<div class="selected">
						<picker mode="selector" range-key="name" @change="handleBeneficiary"
							:value="infoData.beneficiary_owner" :range="items">
							<text>{{!infoData.beneficiary_owner ? "请选择法人是否为受益人" : infoData.beneficiary_owner == 1 ? "是" : "否"}}</text>
						</picker>
					</div>
				</view>
			</view>
			<view class="item-wrap">
				<view class="form-wrap input-img">
					<text class="label"><text class="required color-base-text">*</text>签署人身份证人像面</text>
					<view class="img-wrap" @click="uplodImg('signatory_card', 1)">
						<text class="iconfont iconadd1" v-if="!infoData.signatory_card"></text>
						<image v-else :src="$util.img(infoData.signatory_card)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="form-wrap">
					<text class="label">
						<text class="required color-base-text">*</text>签署人姓名
					</text>
					<input type="text" class="uni-input"  placeholder="请输入签署人姓名" v-model="infoData.signer_name" />
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>签署人身份证号</text>
					<input type="text" class="uni-input" maxlength="18" placeholder="请输入签署人身份证号" v-model="infoData.signer_card_id" />
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>签署人电话</text>
					<input type="text" class="uni-input" maxlength="11" placeholder="请输入签署人电话" v-model="infoData.signer_phone" />
				</view>
			</view>
			<view class="item-wrap">
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>客服电话</text>
					<input type="text" class="uni-input"  placeholder="请输入客服电话" v-model="infoData.service_phone" />
				</view>
			</view>

			<loading-cover ref="loadingCover"></loading-cover>
		</view>
		
		<view class="set-next">
			<button type="default" @click="toPrevious()">上一步</button>
			<button type="primary" @click="toNext()">下一步</button>
		</view>
	</view>
</template>

<script>
	import validate from "@/common/js/validate.js";
	import pickRegionsApplication from "@/components/pick-regions-application/pick-regions.vue";
	import pickBussinessType from "@/components/pick-bussiness-type/pick-bussiness.vue";
	export default {
		data() {
			return {
				steps: ['基本信息', '商户资料', '银行账户', '线上店铺'],
				currentStep: 2,
				items: [{
						code: 1,
						name: "是",
					},
					{
						code: 2,
						name: "否",
					},
				],
				infoData: {
					alt_merchant_type: 11, //申请类型
					login_name: "", //邮箱
					signer_card_type: 1,
					bussiness_type: "",
					defaultRegions: [],
				},
				defaultRegions: [], //省市区选择器
				shopPackage: {
					group_name: "",
				},
				loadingBussiness: true,
			};
		},
		components: {
			pickRegionsApplication,
			pickBussinessType,
		},
		async onLoad() {
			this.initData();
			await this.getApplication();
		},
		async onShow() {
			if (uni.getStorageSync("shopPackage"))
				this.shopPackage = JSON.parse(uni.getStorageSync("shopPackage"));
		},
		methods: {
			// 获取是否进件是否审核通过
			async getApplication() {
				return new Promise((resolve, reject) => {
					this.$api.sendRequest({
						url: "/shopapi/apply/getShopApplyStatus",
						data: {
							member_id: uni.getStorageSync("member_id"),
						},
						success: (res) => {
							if (res.data) {
								if (res.data) {
									this.infoData = res.data;
									this.loadingBussiness = false;
									setTimeout(() => {
										this.loadingBussiness = true;
									}, 100);
								}
							}
						},
					});
					resolve();
				});
			},
			// 时间格式化
			convertDateFormat(dateString) {
				// 使用正则表达式提取年份、月份和日期
				const regex = /(\d{4})年(\d{2})月(\d{2})日/;
				const match = dateString.match(regex);

				if (match) {
					// 如果匹配成功，重新格式化为所需格式
					return `${match[1]}-${match[2]}-${match[3]}`;
				} else {
					throw new Error("输入日期格式不正确");
				}
			},
			// 选择是否为受益人
			handleBeneficiary(e) {
				this.$set(
					this.infoData,
					"beneficiary_owner",
					this.items[e.detail.value].code
				);
			},
			initData() {
				this.$api.sendRequest({
					url: "/shopapi/apply/certInfo",
					success: (res) => {
						let data = res.data;
						if (res.code == 0 && data && data.shop_cert_info) {
							let initData = data.shop_cert_info;
							this.defaultRegions.push(initData.company_province_id);
							this.defaultRegions.push(initData.company_city_id);
							this.defaultRegions.push(initData.company_district_id);
						} else {
							if (uni.getStorageSync("openInfo")) {
								// this.infoData = JSON.parse(uni.getStorageSync('openInfo'));
							}
						}
						this.$forceUpdate();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
				});
			},
			bindStartDateChange(e) {
				this.$set(this.infoData, 'id_card_valid_time_begin', e.detail.value)
			},
			bindEndDateChange(e) {
				this.$set(this.infoData, 'id_card_valid_time_end', e.detail.value)
			},

			businessStratDateChange(e) {
				this.$set(this.infoData, 'license_valid_date', e.detail.value)
			},
			businessEndDateChange(e) {
				this.$set(this.infoData, 'license_expiry', e.detail.value)
			},
			// 获取选择的地区
			handleGetRegions(regions, index, string) {
				this.infoData.companyAddressString = string;
				this.infoData.companyAddressIndex = index;
				this.infoData.province = regions.province;
				this.infoData.city = regions.city;
				this.infoData.county = regions.county;
			},
			handleGetBussiness(e, index, string) {
				this.infoData.bussinessString = string;
				this.infoData.bussinessIndex = index;
				this.infoData.bussiness_type = e.code;
			},
			uplodImg(type, pan) {
				this.$util.upload({
						number: 1,
						path: "image",
					},
					(res) => {
						if (res) {
							console.log("res", res);

							this.$util.showToast({
								title: "上传成功",
							});
							if (type == "trade_licence") {
								this.$set(this.infoData, "trade_licence", res[0]);
							} else if (type == "legalPersonFront") {
								this.$set(this.infoData, "id_doc_copy", res[0]);
							} else if (type == "legalPersonReverse") {
								this.$set(this.infoData, "id_card_national", res[0]);
							} else if (type == "signatory_card") {
								this.$set(this.infoData, "signatory_card", res[0]);
							}
							if (
								type != "special_licence_one" ||
								type != "special_licence_two"
							) {
								this.getOcrInfo(type, pan, res[0]);
							}
						}
					}
				);
			},
			getOcrInfo(type, pan, url) {
				this.$api.sendRequest({
					url: "/shopapi/upload/getOcrInfo",
					data: {
						urlPic: url,
						type: type == "trade_licence" ? 3 : type == "bank_img" ? 2 : 1,
						side: pan,
					},
					success: (res) => {
						if (res.code == 0 && res.data) {
							let data = res.data;
							if (type == "trade_licence") {
								this.$set(this.infoData, "alt_mch_name", data.company);
								this.$set(this.infoData, "license_no", data.code);
								this.$set(this.infoData, "manage_addr", data.address);
								this.$set(this.infoData, "company_address", data.address);
								this.$set(
									this.infoData,
									"license_valid_date",
									this.convertDateFormat(data.borntime)
								);
								this.$set(this.infoData, "manage_scope", data.manage_scope);
							}

							if (type == "legalPersonFront") {
								this.$set(this.infoData, "legal_person", data.name);
								this.$set(this.infoData, "id_card_no", data.num);
								this.$set(this.infoData, "id_address", data.address);
								this.$set(this.infoData, "contact_certfiticate_num", data.num);
								this.$set(this.infoData, "busi_contact_name", data.name);
							}
							if (type == "legalPersonReverse") {
								//身份证反面
								this.$set(
									this.infoData,
									"id_card_valid_time_begin",
									data.starttime
								);
								this.$set(this.infoData, "id_card_valid_time_end", data.endtime);
							}
							if (type == "signatory_card") {
								this.$set(this.infoData, "signer_name", data.name);
								this.$set(this.infoData, "signer_card_id", data.num);
							}
						} else {
							// this.$util.showToast({
							// 	title: res.message
							// });
						}
					},
				});
			},
			vertify() {
				let rule = [{
						name: "trade_licence",
						checkType: "required",
						errorMsg: "请上传营业执照",
					},
					{
						name: "alt_mch_name",
						checkType: "required",
						errorMsg: "请输入公司名称",
					},
					{
						name: "alt_mch_short_name",
						checkType: "required",
						errorMsg: "请输入公司简称",
					},
					{
						name: "license_no",
						checkType: "required",
						errorMsg: "请输入统一社会信用代码",
					},
					{
						name: "license_expiry",
						checkType: "required",
						errorMsg: "请选择营业执照有效期",
					},
					{
						name: "bussiness_type",
						checkType: "required",
						errorMsg: "请选择经营行业",
					},
					{
						name: "province",
						checkType: "required",
						errorMsg: "请选择经营地区",
					},
					{
						name: "manage_addr",
						checkType: "required",
						errorMsg: "请输入详细地址",
					},
					{
						name: "manage_scope",
						checkType: "required",
						errorMsg: "请输入营业范围",
					},
					{
						name: "login_name",
						checkType: "required",
						errorMsg: "请输入商户邮箱",
					},
					{
						name: "busi_contact_name",
						checkType: "required",
						errorMsg: "请输入联系人姓名",
					},
					{
						name: "busi_contact_mobile_no",
						checkType: "phoneno",
						errorMsg: "请输入正确的联系人电话",
					},
					{
						name: "busi_contact_mobile_no",
						checkType: "required",
						errorMsg: "请输入联系人电话",
					},
					{
						name: "id_doc_copy",
						checkType: "required",
						errorMsg: "请上传法人身份证正面",
					},
					{
						name: "id_card_national",
						checkType: "required",
						errorMsg: "请上传法人身份证反面",
					},
					{
						name: "legal_person",
						checkType: "required",
						errorMsg: "请输入法人姓名",
					},
					{
						name: "id_card_no",
						checkType: "required",
						errorMsg: "请输入法人身份证号",
					},
					{
						name: "id_card_no",
						checkType: "lengthMin",
						checkRule: 18,
						errorMsg: "身份证号不能少于18位",
					},
					{
						name: "id_card_valid_time_begin",
						checkType: "required",
						errorMsg: "请输入身份证有效期开始时间",
					},
					{
						name: "id_card_valid_time_end",
						checkType: "required",
						errorMsg: "请输入身份证有效期结束时间",
					},
					{
						name: "phone_no",
						checkType: "phoneno",
						errorMsg: "请输入正确的法人电话",
					},
					{
						name: "phone_no",
						checkType: "required",
						errorMsg: "请输入法人电话",
					},
					{
						name: "beneficiary_owner",
						checkType: "required",
						errorMsg: "请选择法人是否为受益人",
					},
					{
						name: "signatory_card",
						checkType: "required",
						errorMsg: "请上传签署人身份证正面",
					},
					{
						name: "signer_name",
						checkType: "required",
						errorMsg: "请输入签署人姓名",
					},
					{
						name: "signer_card_id",
						checkType: "required",
						errorMsg: "请输入法人身份证号",
					},
					{
						name: "signer_card_id",
						checkType: "lengthMin",
						checkRule: 18,
						errorMsg: "身份证号不能少于18位",
					},
					{
						name: "signer_phone",
						checkType: "phoneno",
						errorMsg: "请输入正确的法人电话",
					},
					{
						name: "signer_phone",
						checkType: "required",
						errorMsg: "请输入法人电话",
					},
				];
				let checkRes = validate.check(this.infoData, rule);
				if (checkRes) {
					return true;
				} else {
					this.$util.showToast({
						title: validate.error,
					});
					return false;
				}
			},
			toPrevious() {
				uni.navigateBack({
					delta: 1,
				});
			},
			toNext() {
				this.infoData.busi_contact_mobile_no = this.infoData.phone_no
				// // uni.navigateTo({
				// // 	url: "/pages/apply/bankInfo",
				// // });
				// // return;
				if (this.vertify()) {
					uni.setStorageSync("application_companyInfo", this.infoData);
					uni.navigateTo({
						url: "/pages/apply/bankInfo",
					});
				}
			},
		},
	};
</script>

<style lang="scss">
	.authentication-info {
		overflow: hidden;
		margin: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.item-wrap {
		margin-top: 20rpx;
		background-color: #fff;

		&.type {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 26rpx solid #f8f8f8;
		}

		.form-wrap {
			display: flex;
			align-items: center;
			margin: 0 $margin-both;
			border-bottom: 1px solid $color-line;
			height: 100rpx;
			line-height: 100rpx;

			&:last-child {
				border-bottom: none;
			}

			.label {
				margin-right: $margin-both;
				vertical-align: middle;
			}

			input {
				vertical-align: middle;
				display: inline-block;
				flex: 1;
				text-align: right;
			}

			&.more-wrap {
				.selected {
					vertical-align: middle;
					display: inline-block;
					flex: 1;
					text-align: right;
					color: $color-tip;
					overflow: hidden;
					white-space: pre;
					text-overflow: ellipsis;

					&.have {
						color: $color-title;
					}
				}

				.iconfont {
					color: $color-tip;
					margin-left: 20rpx;
				}
			}

			.value {
				font-weight: bold;
				vertical-align: middle;
				display: inline-block;
				flex: 1;
				text-align: right;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: pre;
			}

			&.input-img {
				height: 240rpx;
				line-height: 200rpx;
				display: block;

				.img-wrap {
					position: relative;
					float: right;
					display: inline-block;
					margin-top: 30rpx;
					width: 300rpx;
					height: 140rpx;
					line-height: 140rpx;
					text-align: center;
					border: 2rpx dashed $color-disabled;

					.iconfont {
						font-size: 68rpx;
						color: $color-disabled;
					}

					image {
						width: 100%;
						height: 100%;
					}

					.tips {
						position: absolute;
						bottom: -70rpx;
					}
				}
			}
		}

		.type-wrap {
			display: flex;
			// align-items: center;
			// justify-content: space-between;
			margin-bottom: 20rpx;

			view {
				position: relative;
				margin-right: 40rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: $color-tip;
				border: 2rpx solid $color-disabled;
				border-radius: 12rpx;
				padding: 0 30rpx;

				&:last-child {
					margin-right: 0;
				}

				.iconfont {
					position: absolute;
					right: -24rpx;
					bottom: -20rpx;
					font-size: 80rpx;
					display: none;
				}

				&.selected {
					.iconfont {
						display: block;
					}
				}
			}
		}
	}

	.form-title {
		margin-bottom: $margin-updown;
	}

	.set-next {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 80rpx;
		padding-bottom: 80rpx;

		button {
			flex: 1;
		}
	}

	.flex_1 {
		flex: 1;
		text-align: right;
		padding-top: 40rpx;

		input {
			height: 100rpx;
			display: block;
		}
	}

	.time-change {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: flex-end;
	}

	.picker {
		vertical-align: middle;
		display: inline-block;
		flex: 1;
		text-align: right;

		.iconfont {
			vertical-align: middle;
		}
	}	.progress-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 66rpx 0;
		background-color: #fff;
		.line {
			height: 14rpx;
			width: 80%;
			background-color: #f9f9f9;
			border-radius: 20rpx;
			display: block;
			position: absolute;
			top: 90rpx;
			left: 10%;
		}
		
		.progress-step {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 25%;
		}
		
		.step-circle {
		  width: 52rpx;
		  height: 52rpx;
		  border-radius: 50%;
		  background-color: #f6f6f6;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  position: relative;
		  box-shadow: 0 0 0px 14rpx #f6f6f6;
		  color: #999;
		  font-weight: bold;
		}
		
		.completed {
		  background-color: #ff6a00;
		  box-shadow: 0 0 0px 14rpx #ff00002e;
		  color: #FFF;
		}
		
		.step-line {
			margin-top: 50rpx;
		}
	}
	
	.apply_button {
		margin: 60rpx 20%;
		padding-bottom: 80rpx;
		text-align: center;
		.tips {
			margin: 20rpx 0;
			font-size: $font-size-tag;
		}

		button {
			margin-top: 40rpx;
		}
	}
</style>